hostname is not configured under images in your next.config.js

✒️ 2025-05-28 11:00 내용 수정

참고 자료 : Next next/image Un-configured Host
에러가 난 상황 : next에서 codeit 서버에 저장된 이미지 경로를 next Image Component에 src로 넣을 때 hostname이 등록되어 있지 않다는 에러가 발생했다.
에러 사진
에러 메시지에 있는 nextjs 에러 설명 페이지를 보니, next.config.js 파일에 images property를 추가하여 hostname과 주소를 등록하면 된다고 한다.
프로젝트 파일에 있는 next.config.mjs 파일의 nextConfig에다가 images property를 추가하고, remotePatterns에 관한 정보를 설정하였다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'learn-codeit-kr-static.s3.ap-northeast-2.amazonaws.com',
        port: '',
        pathname: '/codeitmall/**'
      }
    ]
  }
};

export default nextConfig;

Image Component를 사용한 페이지의 Image 코드

import Image from "next/image";

// 생략...

<Image src={product.imgUrl} alt={product.name} width={300} height={300}/>

next.config.mjs 설정을 마치고 Image Component를 사용한 페이지로 이동 시 이미지가 설정한 폭과 높이대로 잘 출력 되었다.
파일의 확장자도 webp 형식으로 되어 있다.

next image unconfigured 2.png

이미지를 우클릭하여 이미지 링크를 복사하여 새 창에서 열었을 때도 Image Component로 만든 이미지들처럼 url에 폭과 너비가 지정되어 있다.

next image unconfigured 3.png